<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加文字到视频</title>
</head>
<script type="text/javascript" src="../../../assets/js/jquery-1.7.2.min.js"></script>
<style>
    .wrap{
        width: 70%;
        height: 500px;
        background: #000;
        margin: 0 auto;
    }
    video{
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="wrap">
        <video src="demo.mp4" controls="controls"></video>
    </div>
<script>
    $(function(){
        function addUsernameOnVideo(username){
            var time_show_min = 1000,
                time_show_max = 2000,
                time_inter_min = 10000,
                time_inter_max = 20000;

            $('video').each(function(){
                var _video = $(this),
                    _wrap  = _video.parent();

                var timer_out = null,
                    timer_inter = null;

                if( _wrap.css('position') != 'absolute' ){
                    _wrap.css('position', 'relative');
                }

                _wrap.append('<span class="usernameSpan">'+username+'</span>');
                var _username = _wrap.children('.usernameSpan');
                _username.css({'position': 'absolute', 'whiteSpace': 'nowrap', 'color': 'red', 'fontWeight': 'bold', 'display': 'none'});

                var w1 = _username.width(),
                    h1 = _username.height(),
                    w2 = _video.width(),
                    h2 = _video.height();

                $(window).resize(function(){
                    w2 = _video.width();
                    h2 = _video.height();
                });
                _video[0].addEventListener('webkitfullscreenchange',function(){
                    w2 = _video.width();
                    h2 = _video.height();
                });

                _video[0].addEventListener('play',function(){
                    showInter();
                });

                _video[0].addEventListener('pause',function(){
                    showEnd();
                });

                _video[0].addEventListener('ended',function(){
                    showEnd();
                });


                function showSet(){
                    clearTimeout(timer_out);
                    var maxLeft = w2-w1,
                        maxTop = h2-h1;

                    var left = Math.round(maxLeft * Math.random()),
                        top  = Math.round(maxTop * Math.random()),
                        time_show = time_show_min + Math.round((time_show_max - time_show_min) * Math.random());

                    _username.css({'left': left, 'top': top}).show();
                    timer_out = setTimeout(function(){
                        _username.hide();
                    },time_show);
                }

                function showInter(){
                    clearTimeout(timer_inter);
                    var time_inter = time_inter_min + Math.round((time_inter_max - time_inter_min) * Math.random());
                    timer_inter = setInterval(showSet, time_inter);
                }

                function showEnd(){
                    clearTimeout(timer_out);
                    clearTimeout(timer_inter);
                    timer_out = null;
                    timer_inter = null;
                    _username.hide();
                }
            });
        }

        addUsernameOnVideo('你个大坏蛋');
    });
</script>
</body>
</html>